<template>
  <div class="account manager">
    <div class="search">
      <el-form ref="searchRef" :model="searchParams" label-width="80px" :inline="true" v-show="showSearch">
        <template v-for="(x, y) in searchColumns" :key="y">
          <el-form-item :label="x.title" :prop="x.name">
            <el-input v-model="searchParams[x.name]" :placeholder="'请输入' + x.title" />
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="btn">
      <div>
        <el-button @click="handleAdd" type="primary">新增</el-button>
        <el-button @click="batchExcel">批量上传</el-button>
      </div>
      <div>
        <el-button @click="handleSearch">{{ showSearch ? '隐藏' : '显示' }}搜素</el-button>
        <el-button @click="getList" type="primary">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="60" label="顺序" align="center" />
        <template v-for="(x, y) in columnsList" :key="y">
          <el-table-column v-if="x.name == 'avatar'" prop="icon" label="头像" width="80" align="center">
            <template #default="scope">
              <img :src="baseUrl + 'static/' + scope.row.avatar" width="50" height="50"></img>
            </template>
          </el-table-column>
          <el-table-column v-else :prop="x.name" :label="x.title" :width="x.width" align="center" />
        </template>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="action" label="操作" width="230">
          <el-button>查看</el-button>
          <el-button>编辑</el-button>
          <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.show"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next" :total="total" background
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div class="dialog">
      <el-dialog :title="title" v-model="open" width="800px">
        <el-form ref="formRef" :model="form" size="default" label-width="150px">
          <el-form-item v-for="(x, y) in searchColumns" :key="y" :label="x.title" :prop="x.name">
            <template v-if="x.name == 'color'">
              <el-input v-model="form.color" :placeholder="'请输入' + x.title" style="width: 150px;margin-right: 10px;" />
              <input type="color" v-model="form.color" />
            </template>
            <el-input v-else v-model="form[x.name]" :placeholder="'请输入' + x.title" @keyup.enter="submit" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
          <div>
            <el-button type="primary" @click="submit">保 存</el-button>
            <el-button @click="() => { open = false }">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { accountApi } from '@/apis/account';
import { onMounted, reactive, ref } from 'vue';
const baseUrl = import.meta.env.VITE_APP_BASE_API
const tableData = ref([])
const searchColumns = ref([])
const searchParams = ref([])
const form = ref({})
const showSearch = ref(false)
const open = ref(false)
const queryParams = reactive({
  page: 1,
  show: 10
})
const columnsList = [
  {
    name: 'account',
    title: '账号'
  }, {
    name: 'nick',
    title: '昵称',
    width: 120
  }, {
    name: 'avatar',
    title: '层级'
  }, {
    name: 'phone',
    title: '电话'
  }, {
    name: 'comment',
    title: '说明',
    width: 120
  }
]

function handleCurrentChange() { }
function handleSizeChange() { }
function submit() { }
function handleSearch() { }
function resetSearch() { }
function getList() {
  accountApi.list(searchParams.value, queryParams).then(res => {
    tableData.value = res.data
  })
}
function batchExcel() { }
onMounted(() => {
  getList()
})
function handleAdd() {

}
</script>
<style scoped lang="scss">
.manager {
  >div {
    margin-top: 10px;
  }

  .btn {
    display: flex;
    justify-content: space-between;
  }

  .page {
    display: flex;
    justify-content: right;
  }
}
</style>
